<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,ul,li{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
            width:960px;
            margin:0 auto;
        }
        li{
            float:left;
            width:160px;
            text-align:center;
            line-height:2em;
            box-sizing:border-box;    
        }
        li a{
            display:block;
            padding:5px 10px;
            text-decoration:none;
            color:#666;
            width:140px;
            background:pink;
        }
        li a:hover{
            background:#fff;
            color:#00a7e9;
        }
        li div{
            position:absolute;
            height:0;
            overflow:hidden;
            transition:all 0.5s;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="">网站首页</a>
            <div>
                <a href="">峡谷之巅</a>
                <a href="">云顶之弈</a>
            </div>
        </li>
        <li>
            <a href="">新闻咨询</a>
            <div>
                <a href="">赛事新闻</a>
                <a href="">行业动态</a>
                <a href="">官方公告</a>
            </div>
        </li>
        <li>
            <a href="">官方商城</a>
            <div>
                <a href="">道聚城</a>
                <a href="">周边商城</a>
                <a href="">游戏商城</a>
            </div>
        </li>
        <li>
            <a href="">赛事中心</a>
            <div>
                <a href="">LPL职业联赛</a>
                <a href="">MSI季中邀请赛</a>
                <a href="">全球总决赛</a>
                <a href="">德玛西亚杯</a>
                <a href="">LDL发展联赛</a>
                <a href="">城市英雄争霸赛</a>
            </div>
        </li>
        <li>
            <a href="">关于我们</a>
            <div>
                <a href="">游戏简介</a>
                <a href="">联赛介绍</a>
                <a href="">联系我们</a>
                <a href="">官方合作</a>
            </div>
        </li>
        <li>
            <a href="">个人中心</a>
            <div>
                <a href="">登录</a>
                <a href="">注册</a>
                <a href="">裁决之镰</a>
                <a href="">玩家信息</a>
            </div>
        </li>
    </ul>
    <script>
        var li=document.querySelectorAll('ul li');
        li.forEach(function(v,i){
            v.onmouseover=function(){
                this.children[1].style.height=this.children[1].scrollHeight+'px';
            }
            v.onmouseout=function(){
                this.children[1].style.height='0';
            }
        });
    </script>
</body>

</html>